<!--  -->
<template>
    <div class="com-container" @dblclick="revertMap">
        <div class="com-chart" ref="RefsMap"></div>
    </div>
</template>

<script>
import axios from 'axios'
import { mapState } from 'vuex'
import { getThemeValue } from '@/utils/theme_utils'
import { getProvinceMapInfo } from '@/utils/map_utils.js';
export default {
    components: {},
    computed: {
        ...mapState(['theme']),
    },
    props: {},
    watch: {
        theme () {
            console.log('主题切换了')
            this.chartInstance.dispose() // 销毁当前的图表
            this.initChart() // 重新以最新的主题名称初始化图表对象
            this.screenAdapter() // 完成屏幕的适配
            this.updateChart() // 更新图表的展示
        }
    },
    data() {
        return {
            allData:null,//数据
            mapData:{},//地图数据缓存
        }
    },
    created(){
        this.$WebSocket.registerCallBack('mapData',this.getData)
    },
    mounted() {
        this.initChart();
        // this.getData(); 取消这一步
        // 通过socket通信,来传递需要获取的数据
        this.$WebSocket.send({
            action:'getData',
            socketType:'mapData',
            chartName:'map',
            value:""
        })
        window.addEventListener('resize', this.screenAdapter);
        //在页面加载完成时，主动调用一下
        this.screenAdapter()
    },
    destroyed() {
        window.removeEventListener('resize', this.screenAdapter);
        this.$WebSocket.unRegisterCallBack('mapData')
    },
    methods: {
        //初始化
        async initChart() {
            const _this = this;
            this.chartInstance = this.$Echarts.init(this.$refs.RefsMap, this.theme);
            const { data } = await axios.get('http://192.168.3.129:2024/static/map/china.json')
            this.$Echarts.registerMap('china',data);//注册地图数据
            const initOptions = {
                title:{
                    text:'| 商家分布',
                    top:20,
                    left:20
                },
                geo:{
                    type:'map',
                    map:'china',
                    top:'5%',
                    bottom:'5%',
                    itemStyle:{
                        areaColor:'#2E72BF',
                        borderColor:'#333'
                    }
                },
                legend:{
                    left:'5%',
                    bottom:'5%',
                    orient:'vertical'
                }
            }
            this.chartInstance.setOption(initOptions)
            //对图表对象，进行鼠标事件进行监听
            this.chartInstance.on('click',async (arg)=>{
                //鼠标移入事件
                console.log(`鼠标点击事件`,arg);
                let {key,path} = getProvinceMapInfo(arg.name)
                //获取对应省份地图geoJSON数据
                if(!this.mapData[key]){
                    //只有没有被存下来过的数据,才去请求一下
                    if(path){
                        const { data } = await axios.get(`http://192.168.3.129:2024${path}`)
                        this.mapData[key] = data;//把请求过的数据存下来
                        this.$Echarts.registerMap(key,data);//注册地图数据
                    }
                }
                const changeOptions = {
                    geo:{
                        map:key,

                    },
                }
                this.chartInstance.setOption(changeOptions)
            });
        },
        //获取数据
        async getData(data) {
            try {
                // this.allData = await getDataJson('map');//
                this.allData = data;
                this.updateChart()
            } catch (error) {
                console.log(error)
            }
        },
        //更新视图，处理数据
        updateChart() {
            const _this = this;
            const legendArr = this.allData.map(item=>item.name)
            const seriesArr = this.allData.map(item=>{
                // 代表一个类别下所有散点数据
                // 如果想在地图中显示散点的数据,所以我们需要给散点的图表添加一个配置: coordinateSystem:geo
                return {
                    type:'effectScatter',
                    rippleEffect:{
                        scale:10,//涟漪效果
                        // brushType:'stroke',//空心效果
                    },
                    name:item.name,
                    data:item.children,
                    coordinateSystem:'geo',
                    
                }
            })
            const dataOptions = {
                legend:{
                    data:legendArr
                },
                series:seriesArr
            }
            this.chartInstance.setOption(dataOptions)
        },

        // 当浏览器的大小发生变化的时候，会调用方法，来完成屏幕的适配
        screenAdapter() {
            this.$nextTick(() => {
                const titleFontSize = this.$refs.RefsMap.offsetWidth / 100 * 3.6;
                //分辨率大小的相关配置项
                const adapterOptions = {
                    title:{
                        textStyle:{ //主标题 文字样式设置
                            fontSize: titleFontSize,
                        },
                    },
                    // 图例大小与 文字大小调整
                    legend:{
                        itemWidth:titleFontSize / 2,
                        itemHeight:titleFontSize / 2,
                        itemGap:titleFontSize / 2, 
                        textStyle:{
                            fontSize:titleFontSize / 2
                        }
                    }
                }
                this.chartInstance.setOption(adapterOptions);
                //重新计算和绘制图表
                this.chartInstance.resize()
            })
        },
        //双击回到中国地图
        revertMap(){
            console.log('双击');
            const revertOptions = {
                geo:{
                    map:'china'
                }
            }
            this.chartInstance.setOption(revertOptions)
        }
    }
}
</script>
<style lang='scss' scoped></style>